/*
 * Copyright © 2017 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

import React, {PropTypes} from 'react';
import T from 'i18n-react';

const PREFIX = 'features.DataPrep.DataPrepSidePanel.ColumnsTab.ColumnDetail';
export default function ColumnsTabDetail({columnInfo}) {
  let {types} = columnInfo;
  if (!types) { return null; }
  let headers = Object.keys(types);
  return (
    <tr className="column-tab-details">
      <td />
      <td colSpan="4">
        <table className="table">
          <thead>
            <tr>
              <th>{T.translate(`${PREFIX}.Header.inferredType`)}</th>
              <th>{T.translate(`${PREFIX}.Header.percentageChange`)}</th>
            </tr>
          </thead>

          <tbody>
            {
              headers.map((head) => {
                return (
                  <tr key={head}>
                    <td>{head}</td>
                    <td>{types[head]}</td>
                  </tr>
                );
              })
            }
          </tbody>
        </table>
      </td>
      <td />
    </tr>
  );
}

ColumnsTabDetail.propTypes = {
  columnInfo: PropTypes.object
};
